<template>
  <div class="search">
    <header>
      <!-- <div class="state"></div> -->
      <div class="nav">
        <div @click="goBack">
          <img src="../assets/goback.svg" alt />
        </div>
        <div>
          <img src="../assets/search-black.svg" alt />
          <input type="text" v-model="search" />
        </div>
      </div>
    </header>

    <main>
      <!-- <div class="switch-tag">
        <p>标签</p>
        <div class="tag">
          <span>祖国</span>
          <span>赞美</span>
        </div>
      </div>-->

      <div class="record">
        <p>记录</p>
        <ul class="note">
          <li
            v-for="(item,index) in noteList"
            :key="item.value"
            @click.stop="goNoteDetail(item.id)"
          >
            <div class="tag">
              <span
                v-for="items in item.tag"
                :key="items.vals"
                :style="{'backgroundColor':items.color}"
              >{{items.title}}</span>
            </div>
            <div class="content">
              <p>{{item.content}}</p>
              <p>{{item.created_at}}</p>
            </div>
          </li>
        </ul>
        <div v-if="isNoneData" style="text-align:center">{{noneData}}</div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  name: "search",
  components: {},
  data() {
    return {
      search: "",
      page: "",
      pagesize: "",
      noteList: [],
      noneData: "没有数据",
      isNoneData: false
    };
  },
  methods: {
    goNoteDetail(id) {
      this.$router.push("/addrecord?id=" + id);
    },
    searchNoteList(search) {
      // 每次请求数据把之前搜索的结果清空
      this.noteList = []
      try {
        let res = this.$api.note
          .notelist({
            access_token: localStorage.getItem("access_token"),
            search: search,
            page: this.page,
            pagesize: this.pagesize
          })
          .then(res => {
            if (res.error == 1000) {
              this.isNoneData = true;
              return false;
            } else if (res.error == 0) {
              this.isNoneData = false;
              this.noteList = res.data.items;
            }
            layer.open({
              content: res.msg,
              skin: "msg",
              time: 2
            });
          });
      } catch (e) {}
    },
    goBack() {
      this.$router.go(-1);
    }
  },
  watch: {
    search: function(val) {
      this.searchNoteList(val);
    }
  }
};
</script>

<style lang="less" scoped>
.search {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  //   background-color: rgb(238, 238, 238);
  header {
    width: 100%;
    position: fixed;
    .state {
      height: 25px;
      background-color: rgb(10, 1, 35);
    }
    .nav {
      height: 60px;
      background-color: rgb(10, 1, 35);
      display: flex;
      > div {
        &:first-of-type img,
        &:last-of-type input {
          position: relative;
          top: 50%;
          transform: translateY(-50%);
        }
        &:first-of-type {
          flex: 1;
          img {
            width: 1.5rem;
            left: 1.4rem;
          }
        }
        &:last-of-type {
          flex: 4;
          img {
            width: 1rem;
            position: absolute;
            top: 55%;
            left: 5.4rem;
            z-index: 99;
          }
          input {
            width: 90%;
            height: 2.2rem;
            font-size: 1rem;
            border-radius: 1rem;
            border: none;
            outline: none;
            padding-left: 2.4rem;
          }
        }
      }
    }
  }
  main {
    padding-top: 80px;
    // background-color: rgb(236,236,236);
    .switch-tag {
      width: 100%;
      padding: 1rem;
      background-color: #fff;
      > p {
        font-size: 0.8rem;
        margin-bottom: 0.6rem;
      }
      .tag {
        padding: 0.3rem 0 0 0.3rem;
        min-height: 2.6rem;
        span {
          padding: 0.36rem 0.7rem;
          margin-right: 0.3rem;
          margin-bottom: 0.3rem;
          font-size: 1rem;
          letter-spacing: 0.05rem;
          color: #fff;
          display: inline-block;
          background-color: pink;
          border-radius: 0.3rem;
        }
      }
    }

    .record {
      > p {
        font-size: 1rem;
        padding: 1rem;
      }
      .note {
        width: 94%;
        margin: 0 auto;
        margin-bottom: 1.4rem;
        li {
          margin-bottom: 1.4rem;
          background-color: #fff;
          border-radius: 0.2rem;
          box-shadow: 0rem 0.1rem 0.3rem #ccc;
          overflow: hidden;
          .tag {
            // height: 3rem;
            padding: 0.3rem 0 0 0.3rem;
            min-height: 2.6rem;
            background-color: rgb(166, 166, 166);
            span {
              // height: 1.6rem;
              padding: 0.36rem 0.7rem;
              margin-right: 0.3rem;
              margin-bottom: 0.3rem;
              font-size: 1rem;
              letter-spacing: 0.05rem;
              color: #fff;
              display: inline-block;
              background-color: pink;
              border-radius: 0.3rem;
            }
          }
          .content {
            padding: 0.5rem;
            margin-top: 0.5rem;
            font-size: 1rem;
            line-height: 1.1rem;
            letter-spacing: 0.1rem;
            p:last-of-type {
              margin-top: 0.8rem;
            }
          }
        }
      }
    }
  }
}
</style>
